<template>
	<view v-if="isShow" @tap="close" class="image-preview" :style="{width:systemInfo.screenWidth+'px',height:systemInfo.screenHeight+'px'}">
        <view @tap="close" class="dark_bg" :class="{active:active}"></view>
        <swiper  class="swiper" @change="change" :circular="true" :current="current" :disable-programmatic-animation="true" :style="{width:systemInfo.screenWidth+'px',height:systemInfo.screenHeight+'px'}">
			<swiper-item v-for="(item,index) in imageUrl" :key="index">
				<scroll-view scroll-y="true" class="swiper-item" :style="{width:systemInfo.screenWidth+'px',height:systemInfo.screenHeight+'px'}">
					<view @longpress="showOperate($event,item)" @tap.stop="close" :style = "{width:systemInfo.screenWidth+'px',height:currentStyle[index].height}"></view>
					<image @longpress="showOperate($event,item)" @tap.stop="close" class="item-image" :style="currentStyle[index]" mode="aspectFill" :src="item"></image>
				</scroll-view>
				<!--
				<view class="swiper-item" :style="{width:systemInfo.screenWidth+'px',height:systemInfo.screenHeight+'px'}">
					<image @longpress="showOperate($event,item)" @tap.stop="close" class="item-image" :style="currentStyle[index]" mode="aspectFill" :src="item"></image>
				</view>
				-->
			</swiper-item>
		</swiper>
		<view class="indicator" v-if="indicatorShow" :style="{ width:systemInfo.screenWidth+'px' }">
			<view class="indicator-dots" :class="`${index==current?'dots-yes':'dots-no'}`" v-for="(item,index) in imageUrl"></view>
		</view>
	</view>
	<!--删除控件-->
	<uni-popup ref="popupOperate" :safe-area="false">
	    <view class="sys-confirm-content">
			<text class="confirm-content-title">是否将图片保存到相册？</text>
			<text @tap="saveImage" class="content-button button-confirm" style="color: #1DC691;">保存</text>
			<view style="height: 20rpx; background: #f5f5f5"></view>
			<text @tap="popupOperate.close()" class="content-button" style="color: #999999;">取消</text>
	    </view>
	</uni-popup>
</template>

<script setup lang="tsx" name="imagePreview">
import { nextTick, ref } from 'vue';

const systemInfo = ref(uni.getSystemInfoSync());
const active = ref(false);
const current = ref(0);
//const swiperShow = ref(false);
const currentStyle:any = ref([]);//图片位置
const imageUrl:any = ref();//图片地址
const isShow = ref(false);
const indicatorShow = ref(false);
const idPre = ref('');

let startStyle:any = [];
const open = (params:any) => {
	startStyle = [];//初始化
	isShow.value = true;
    idPre.value = params.idPre;
	
	let startInfo:any = JSON.parse(JSON.stringify(params.startInfo));
	imageUrl.value = JSON.parse(JSON.stringify(params.urls));
	current.value = params.index;
	
	imageUrl.value.forEach((item:string,index:number) => {
		let info = startInfo[index];
		if(info==null)info = startInfo[0];
		startStyle.push({
			width: `${info.width}px`,
			height: `${info.height}px`,
			top:`${info.top}px`,
			left:`${info.left}px`,
		});
		currentStyle.value = JSON.parse(JSON.stringify(startStyle));
		uni.getImageInfo({
			src: item, // 图片的路径  
			success: function (res:any){
				const width = res.width; // 图片的宽度  
				const height = res.height; // 图片的高度  
				
				const imgMaxWidth = systemInfo.value.screenWidth;
				const imgMaxHeight = imgMaxWidth*(height/width);
				
				let top = 0 
				if(imgMaxHeight < systemInfo.value.screenHeight){
					top = (systemInfo.value.screenHeight-imgMaxHeight)/2
				}
				let endStyle = {
				    width: `${imgMaxWidth}px`,
				    height: `${imgMaxHeight}px`,
				    top:`${top}px`,
				    left:0,
				}
				currentStyle.value[index] = endStyle;
				if(index==0)active.value = true;
				
				
				if(imageUrl.value.length>1){
					setTimeout(()=>{
					    indicatorShow.value = true;
					},150)
				}
			}
		});
	});
}
const close = () => {
    currentStyle.value = startStyle;
    active.value = false;
	indicatorShow.value = false;
    nextTick(()=>{
        setTimeout(()=>{
            isShow.value = false;
        },150)
    })
}
const change = (e:any) => {
	current.value = e.detail.current;

    const id = '#'+idPre.value + e.detail.current;

    console.log(startStyle)

    uni.createSelectorQuery()
        .select(id)
        .boundingClientRect()
        .exec((ret) => {
            if(ret&&ret.length){
                let pos = ret[0]
                startStyle.forEach((item:any)=>{
                    item.height=pos.height+'px'
                    item.width=pos.width+'px'
                    item.top=pos.top+'px'
                    item.left=pos.left+'px'
                })

            }
        });
}
const popupOperate = ref()
const showOperate = (event:any,item:any) => {
	event.preventDefault();
	event.stopPropagation();
	
	selectImage.value = item
	popupOperate.value.open("bottom")
}
const selectImage = ref()
const saveImage = () => {
	uni.saveImageToPhotosAlbum({
		filePath: selectImage.value,
		success: function () {
			popupOperate.value.close()
			uni.showToast({
				title:'保存成功',
				icon:'none',
				duration:1500
			})
		}
	});
}
defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.image-preview {
	position: fixed;
	z-index:1000;
	top:0;
	left:0;

    .dark_bg{
        background-color: rgba(0, 0, 0);
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        opacity:0;
        z-index:1;

        /* #ifdef APP-NVUE */
        transition: opacity 0.15s linear;
        /* #endif */

        /* #ifndef APP-NVUE */
        transition: all linear .15s;
        /* #endif */

        &.active{
            opacity:1;
        }
    }
	.swiper{
		position:fixed;
		z-index:11;
		top:0;
		left:0;
		.swiper-item{
			position: relative;
			
			.item-image{
				position:absolute;
			    /* #ifdef APP-NVUE */
			    transition-property: width, height, left, top,opacity;
				transition-duration:0.15s;
			    transition-timing-function: linear;
			    /* #endif */
			
			    /* #ifndef APP-NVUE */
			    transition: all linear .15s;
			    /* #endif */
			}
		}
	}
    .indicator{
		position:fixed;
		z-index:15;
		bottom: 100rpx;
		left: 0;
		
		display: flex;
		justify-content: center;
		flex-direction: row;
		align-items: center;
		.indicator-dots{
			width: 15rpx;
			height: 15rpx;
			margin: 0 15rpx;
			border-radius:50%;
		}
		.dots-yes{
			background: #ffffff;
		}
		.dots-no{
			background: #999999;
		}
	}
}
/*底部弹出操作确认框样式*/
.sys-confirm-content{
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	display: flex;
	flex-direction: column;
	justify-content: center;
	.confirm-content-title{
		padding-top: 50rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
	}
	.confirm-content-tip{
		padding: 20rpx 40rpx 20rpx 90rpx;
		.content-tip-row{
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
		}
	}
	.content-button{
		height: 100rpx;
		line-height: 100rpx;
		
		text-align: center;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
	}
	.button-confirm{
		margin-top: 20rpx;
	}
}

</style>